<style>
    .panel-fieldlist .fieldlist dd ins {
        width: 20%;
    }

    .panel-fieldlist .fieldlist dd input, .panel-fieldlist .fieldlist dd select {
        width: 100%;
    }

    .list-group-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .groups {
        display: flex;
        align-items: center;
    }

    .house {
        display: flex;
    }

    .house .price {
        color: crimson;
    }

    .house .house-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        padding: 10px 0;
    }

    .house .house-row .col {
        width: calc(100% / 3);
    }

    .title {
        font-weight: bold;
        font-size: 16px;
    }

    .list-group .list-group-item .label {
        padding: 5px 10px;
    }

    .table-goods > thead > tr > th, .table-goods > tbody > tr > th, .table-goods > thead > tr > td, .table-goods > tbody > tr > td {
        vertical-align: middle;
    }

</style>
<div id="app">
    <div class="panel panel-default">
        <div class="panel-heading">订单信息
            <a href="javascript:window.print();" class="btn btn-info btn-xs pull-right"><i class="fa fa-print"></i> 打印</a>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-6">
                    <ul class="list-group">
                        <input type="hidden" id="order_id" value="{$row.id}">
                        <input type="hidden" id="now-status" value="{$row.status}">
                        <input type="hidden" id="amount" value="{$row.amount}">
                        <li class="list-group-item">订单号：{$row.orderid}</li>
                        <li class="list-group-item" style="display: flex;justify-content: space-between;align-items: center;">
                            <div>
                                订单状态：
                                {if $row['status'] == 'created' || $row['status'] == 'refunding' || $row['status'] == 'checkouting'}
                                <span class="label label-danger">{$row.status_text}</span>
                                {/if}
                                {if $row['status'] == 'expired' || $row['status'] == 'canceled'}
                                <span class="label label-default">{$row.status_text}</span>
                                {/if}
                                {if $row['status'] == 'paid' || $row['status'] == 'finished'}
                                <span class="label label-success">{$row.status_text}</span>
                                {/if}
                                {if $row['status'] == 'shipped'}
                                <span class="label label-info">{$row.status_text}</span>
                                {/if}
                                {if $row['status'] == 'evaluate' || $row['status'] == 'toshopay'}
                                <span class="label label-warning">{$row.status_text}</span>
                                {/if}
                            </div>
                            {if $row['status'] == 'refunding'}
                            <div>
                                <button type="button" class="btn btn-success btn-status-click" data-status="canceled">去退款</button>
                            </div>
                            {/if}
                            {if $row['status'] == 'shipped'}
                            <div>
                                <button type="button" class="btn btn-success btn-status-click" data-status="evaluate">已送达</button>
                            </div>
                            {/if}
                            <!-- 退房中 -->
                            {if $row['status'] == 'evaluate'}
                            <div>
                                <button type="button" class="btn btn-success btn-status-click" data-status="finished">已完成</button>
                            </div>
                            {/if}

                            {if $row['status'] == 'created'}
                            <div>
                                <button type="button" class="btn btn-success btn-status-click" data-status="paid">已支付</button>
                                <button type="button" class="btn btn-primary btn-status-click" data-status="canceled">取消</button>
                            </div>
                            {/if}

                            {if $row['status'] == 'paid'}
                            <div>
                                <button type="button" class="btn btn-success btn-status-click" data-status="shipped" data-now_status="{$row.status}">去配送</button>
                                <button type="button" class="btn btn-primary btn-status-click" data-status="canceled">取消</button>
                            </div>
                            {/if}
                        </li>

                        <li class="list-group-item">下单用户：{$row.user.nickname}（用户ID：{$row.user_id}）</li>

                        <li class="list-group-item">订单金额：￥{$row.amount}</li>
                        <li class="list-group-item">支付金额：￥{$row.payamount}</li>
                        <li class="list-group-item">优惠金额：￥{:$row['coupon_amount']?$row['coupon_amount']:0}</li>
                        <li class="list-group-item">
                            <span style="width: 140px;">退款金额：￥{:$row['outamount']?$row['outamount']:0}</span>
                            {if $row['paytype'] != 'system' && !empty($row['paytime']) && $row['outtype'] == 1}
                            <span>{$refunded_info}</span>
                            {/if}
                        </li>
                    </ul>
                </div>
                <div class="col-xs-6">
                    <ul class="list-group">
                        <li class="list-group-item">下单时间：{$row.createtime|date="Y-m-d H:i:s",###}</li>
                        <li class="list-group-item">使用优惠券：{if isset($row['user_coupon']) && isset($row['user_coupon']['coupon'])} {$row['user_coupon']['coupon']['name']} {else/} 无 {/if}</li>
                        <li class="list-group-item">支付方法：{$row.method}</li>
                        <li class="list-group-item">支付类型：{$row.paytype}</li>
                        <li class="list-group-item">支付时间：{notempty name="row.paytime"}{$row.paytime|date="Y-m-d H:i:s",###}{/notempty}</li>

                        <li class="list-group-item">
                            配送房间号：{$row['params']['house_number']}
                        </li>
                        <li class="list-group-item edit-list">
                            <div class="groups">
                                <span style="min-width: 45px;">备注：</span>
                                <div>{$row.memo}</div>
                                <input class="form-control hide" type="text" value="{$row.memo}">
                            </div>
                            <div>
                                <a class="btn btn-success btn-edit" data-status="edit" href="javascript:;">编辑</a>
                                <a class="btn btn-primary hide btn-cancel" data-status="cancel" href="javascript:;">取消</a>
                                <a class="btn btn-info hide btn-save" data-status="save" data-field="memo" data-id="{$row.id}" href="javascript:;">保存</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <span>商品信息</span>
        </div>
        <div class="panel-body">
            <div class="goods">
                <table class="table table-bordered table-goods">
                    <thead>
                    <tr>
                        <th class="text-center">商品ID</th>
                        <th>名称</th>
                        <th class="text-center">图片</th>
                        <th class="text-center">价格</th>
                        <th class="text-center">数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    {foreach name="row['source']" item="item"}
                    <tr>
                        <th class="text-center" scope="row">{$item['goods_id']}</th>
                        <td>{$item['name']}</td>
                        <td class="text-center">
                            <img src="{$item['image_text']}" class="img-sm" alt="">
                        </td>
                        <td class="text-center">{$item.price}</td>
                        <td class="text-center">{$item.nums}</td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
